<template>
  <div class="maincs">
    <div class="main_spac1" style="padding-bottom: 5px">
      <div
        class="main_white padding10"
        element-loading-text="加载中"
        v-loading="listLoading"
        style="min-height: 780px"
      >
        <div class="address_container">
          <div class="address_box">
            <span>商城入口地址:</span>
            <a :href="shop_url" target="_blank">{{ shop_url }}</a>
            <i class="el-icon-document-copy" @click="handleCopy"></i>
          </div>
          <div class="more_address">
            <!-- <el-dropdown
              placement="bottom-start"
              style="margin-left: 45px"
              trigger="click"
            >
              <span class="el-dropdown-link">
                更多入口<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="item in more_address_url"
                  :key="item.name"
                >
                  <div class="dropdown_item">
                    <span>{{ item.title }}:</span>
                    <a :href="item.url" target="_blank">{{ item.url }}</a>
                    <i
                      class="el-icon-document-copy"
                      @click="handleCopyMore(item)"
                    ></i>
                  </div>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown> -->
            <el-dropdown
              placement="bottom-start"
              style="margin-left: 45px"
              trigger="click"
            >
              <span class="el-dropdown-link">
                页面配置<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="item in allocationList"
                  :key="item.name"
                >
                  <div class="dropdown_item">
                    <span @click="changeAllocation(item)">{{ item.name }}</span>
                    <i
                      class="el-icon-document-copy"
                      @click="handleCopyMore(item)"
                    ></i>
                  </div>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>

        <!-- 左侧 -->
        <div class="left_box" v-if="allocationActive == 1">
          <div class="left" :style="{'background-image': `url(${mallSettingStyle})`}">
            <div class="search flex-middle">搜索</div>
            <div
              :class="[{ on: banner.show }, ' left_modle banner_box']"
              @click="showModle('banner')"
            >
              <img src="../../assets/images/shop_banner.png" width="100%" />
            </div>
            <div
              :class="[{ on: infomation.show }, ' left_modle info']"
              @click="showModle('infomation')"
            >
              <img
                src="../../assets/images/infomation.png"
                width="100%"
                style="margin-top: 10px"
              />
            </div>
            <div
              :class="[{ on: parts.show }, ' left_modle part part_model']"
              @click="showModle('parts')"
            >
              <img
                v-show="parts.style == 1"
                src="../../assets/images/part1.png"
                width="100%"
              />
              <img
                v-show="parts.style == 2"
                src="../../assets/images/part2.png"
                width="100%"
              />
              <img
                v-show="parts.style == 3"
                src="../../assets/images/part1.png"
                width="100%"
              />
              <img
                v-show="parts.style == 4"
                src="../../assets/images/part2.png"
                width="100%"
              />
              <img
                v-show="[3,4].includes(parts.style)"
                src="../../assets/images/part_icon.png"
                class="part-icon"
              />
            </div>
            <div
              :class="[{ on: subject.show }, ' left_modle subject special']"
              @click="showModle('subject')"
            >
              <div class="special_title">精选专题</div>
              <img
                v-show="subject.style == 1"
                src="../../assets/images/subject1.png"
                width="100%"
              />
              <img
                v-show="subject.style == 2"
                src="../../assets/images/subject2.png"
                width="100%"
              />
              <img
                v-show="subject.style == 3"
                src="../../assets/images/subject3.png"
                width="100%"
              />
            </div>

            <div class="commodity">
              <div
                :class="[{ on: goods.show }, ' left_modle goods']"
                @click="showModle('goods')"
              >
                <img src="../../assets/images/goods1.png" width="100%" v-show="goods.style == 1" />
                <img src="../../assets/images/goods.png" width="100%" v-show="goods.style == 2" />
                <img src="../../assets/images/goods3.png" width="100%" v-show="goods.style == 3" />
              </div>
            </div>
            <div
              :class="[{ on: tabbar.show }, ' left_modle tabbar']"
              @click="showModle('tabbar')"
            >
              <img src="../../assets/images/tabbar.png" width="100%" />
            </div>
          </div>
        </div>

        <!-- 右侧 -->
        <div class="right" v-if="allocationActive == 1">
          <!-- 轮播图 -->
          <banner
            ref="refBanner"
            :show="banner.show"
            @selectGoods="selectGoods"
            :puzzleImg="puzzleImg"
            :upload_img="upload_img"
            :uploadHeader="uploadHeader"
            :category="categoryList"
            @changeUploadType="changeUploadType"
          ></banner>
          <!-- 公告 -->
          <infomation :show="infomation.show"></infomation>
          <!-- 分类导航 -->
          <parts
            ref="refParts"
            :show="parts.show"
            :styleNum="parts.style"
            @chooseStyle="chooseStyle"
            :puzzleImg="puzzleImg"
            :upload_img="upload_img"
            :uploadHeader="uploadHeader"
            @changeUploadType="changeUploadType"
          ></parts>
          <!-- 精选专题 -->
          <subject
            ref="refSubject"
            :show="subject.show"
            :styleNum="subject.style"
            @chooseStyle="chooseStyle"
            @selectGoods="selectGoods"
            :puzzleImg="puzzleImg"
            :upload_img="upload_img"
            :uploadHeader="uploadHeader"
            @changeUploadType="changeUploadType"
          ></subject>
          <!-- 推荐商品 -->
          <goods
            ref="refGoods"
            :show="goods.show"
            :styleNum="goods.style"
            :category="categoryList"
            @selectGoods="selectGoods"
            @chooseStyle="chooseStyle"
            @changeUploadType="changeUploadType"
          ></goods>
          <!-- 底部导航 -->
          <div class="modle tabbar" v-show="tabbar.show">
            <div class="tit"><b>底部导航</b></div>
            <el-row class="setting">
              <el-col :span="12"
                ><span>[首页]强制登录</span
                ><el-switch
                  v-model="switchValue.is_login_index"
                  @change="changeSwitch($event, 'is_login_index')"
                  :active-value="1"
                  :inactive-value="0"
                  active-color="#19b098"
                ></el-switch
              ></el-col>
              <el-col :span="12"
                ><span>[分类]强制登录</span
                ><el-switch
                  v-model="switchValue.is_login_category"
                  @change="changeSwitch($event, 'is_login_category')"
                  :active-value="1"
                  :inactive-value="0"
                  active-color="#19b098"
                ></el-switch
              ></el-col>
              <el-col :span="12"
                ><span>[购物车]强制登录</span
                ><el-switch
                  v-model="switchValue.is_login_cart"
                  @change="changeSwitch($event, 'is_login_cart')"
                  :active-value="1"
                  :inactive-value="0"
                  active-color="#19b098"
                ></el-switch
              ></el-col>
              <el-col :span="12"
                ><span>[我的]强制登录</span
                ><el-switch
                  v-model="switchValue.is_login_my"
                  @change="changeSwitch($event, 'is_login_my')"
                  :active-value="1"
                  :inactive-value="0"
                  active-color="#19b098"
                ></el-switch
              ></el-col>
            </el-row>
            <div class="flex-center">
              <div class="submit flex-center" @click="submitSwitch()">保存</div>
            </div>
          </div>
        </div>

        <div class="left_box" v-if="allocationActive == 2">
          <img
            :src="
              styleNums == 1
                ? 'https://copartner.oss-cn-beijing.aliyuncs.com/logo/2404/17/FeG5eA2ttd5doZvhZeilRAN88fvFvxeXgLW91e6q.png'
                : 'https://copartner.oss-cn-beijing.aliyuncs.com/logo/2404/17/OLuqml4zXoSRSym7FZxjGPiT4iF96RWBWJF4BFkf.png'
            "
            width="375"
          />
        </div>
        <div class="right" v-if="allocationActive == 2">
          <div class="modle banner">
            <div class="tit"><b>分类管理</b></div>
            <p class="info">展示效果：</p>
            <div class="box" style="margin-top: 20px">
              <div
                :class="[{ on: styleNums == 1 }, ' css_box flex-column']"
                @click="chooseStyle1(1)"
              >
                <img
                  src="https://copartner.oss-cn-beijing.aliyuncs.com/logo/2405/07/2fK6dbKZ9JZnSHjpMeiX1qdVyYSCbNpPyUbL5hom.png"
                  width="200"
                />
              </div>
              <div
                :class="[{ on: styleNums == 2 }, ' css_box flex-column']"
                @click="chooseStyle1(2)"
              >
                <img
                  src="https://copartner.oss-cn-beijing.aliyuncs.com/logo/2405/07/TOUvdBc1BVbd6qEUIoCU5kT03eZLCjN6TYCA5IB6.png"
                  width="200"
                />
              </div>
            </div>
            <div class="flex-center">
              <div class="submit flex-center" @click="submitShow">保存</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 选择商品弹窗 -->
    <el-dialog
      title="请选择商品"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="close"
      :visible.sync="shield"
      class="main_dialog dialog900"
    >
      <div class="mainor_form">
        <el-form
          :inline="true"
          :model="form_sh"
          class="demo-form-inline"
          ref="userListFrom1"
          label-width="10px"
        >
          <el-form-item label prop="category_id" class="wid180">
            <el-cascader
              v-model="form_sh.category_id"
              :options="options"
              :props="defaultProps"
              placeholder="分类"
            ></el-cascader>
          </el-form-item>
          <el-form-item label=" " prop="name">
            <el-input
              v-model.trim="form_sh.name"
              placeholder="名称"
              clearable
              class="wid180"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              class="reset marginLeft10"
              type="primary"
              @click="diareset"
              >重置</el-button
            >
            <el-button
              type="primary"
              @click="getArticleList"
              :loading="listLoading"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="main_table">
        <el-table
          ref="multipleTable1"
          v-loading="listLoading"
          :data="list_sh.list.data"
          element-loading-text="加载中"
          fit
          border
          max-height="480"
          highlight-current-row
          @selection-change="chooseGoods"
        >
          <!-- @selection-change="handleSelectionChange" -->
          <!-- 多选 -->
          <el-table-column type="selection" v-if="!isRadio" width="55">
          </el-table-column>
          <!-- 单选 -->
          <el-table-column width="50">
            <template slot-scope="scope">
              <el-radio
                v-if="isRadio"
                @change="chooseGoods(scope.row)"
                v-model="current.id"
                :label="scope.row.id"
                >{{ "" }}</el-radio
              >
            </template>
          </el-table-column>

          <el-table-column
            label="名称"
            prop="name"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="别名"
            prop="byname"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="图片" width="120" class-name="main_hei">
            <template slot-scope="scope">
              <div class="demo-image__error mainor_im">
                <el-image
                  fit="fill"
                  :src="scope.row.pic"
                  :preview-src-list="scope.row.pics"
                >
                  <div slot="error" class="image-slot">
                    <img :src="puzzleImg" />
                  </div>
                </el-image>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="分类"
            prop="userNickname"
            width="180"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <!-- title为null报错 -->
              {{ scope.row.category_p ? scope.row.category_p.title : "无" }}|{{
                scope.row.category ? scope.row.category.title : "无"
              }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="main_page boxdq">
        <!-- 分页 -->
        <div class="main_page_r">
          <el-pagination
            :current-page="current_sh.page"
            :page-sizes="[10, 30, 50, 100]"
            :page-size="limit_sh"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount_sh"
            background
            @size-change="changeLimit"
            @current-change="changePage"
          />
        </div>
        <div></div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="close()">取 消</el-button>
        <el-button type="primary" @click="submitGoods" v-repeatClick
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 选择上传的类型 -->
    <el-dialog
      title="选择上传类型"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="upload_type_show"
      class="main_dialog_copy dialog500"
    >
      <div class="upload_type_container">
        <div @click="upload_type_show = false">
          <el-upload
            ref="upload"
            :action="upload_img"
            :data="{ store: 'shop' }"
            :headers="uploadHeader"
            :on-success="
              (response, file, fileList) => {
                uploadSuccess(response);
              }
            "
            :on-error="uploadErr"
          >
            <div class="upload_box flex-center">本地上传</div>
          </el-upload>
        </div>
        <div @click="upload_online">在线图库</div>
      </div>
      <!-- <div slot="footer">
        <el-button v-repeatClick>关 闭</el-button>
      </div> -->
    </el-dialog>
    <!-- 在线图库 -->
    <el-dialog
      title="在线图库"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="online_images_show"
      @close="online_images_close"
      class="main_dialog_copy dialog790 online_images_dialog"
    >
      <div class="online_images_container">
        <div class="header">
          <el-tabs v-model="activeName" @tab-click="handleClicktab">
            <el-tab-pane label="全部图片" name=""> </el-tab-pane>
            <el-tab-pane
              v-for="(item, index) in upload_data.category"
              :key="index"
              :label="item.name"
              :name="String(item.id)"
            ></el-tab-pane>
          </el-tabs>
        </div>
        <div class="container">
          <!-- 图片盒子 -->
          <div class="image_box">
            <div
              class="item"
              v-for="(item, index) in upload_data.list"
              :key="index"
              @mouseover="item.show = true"
              @mouseleave="item.show = false"
            >
              <el-tooltip effect="dark" :content="item.remark" placement="bottom">
                <div>
                  <div class="image">
                    <el-image fit="fill" :src="item.path" :title="item.remark">
                      <div slot="error" class="image-slot">
                        <img :src="puzzleImg" />
                      </div>
                    </el-image>
                  </div>
                  <div class="image_mask" v-if="item.show">
                    <div class="image_mask_main">
                      <span @click="handleUpload(item)">点击使用</span>
                    </div>
                  </div>
                </div>
              </el-tooltip>
            </div>
          </div>
          <div class="no_image" v-if="upload_data.list.length == 0">
            <img src="@/assets/images/no_data.png" alt="" />
          </div>
        </div>
        <div class="footer_page">
          <div class="main_page boxdq">
            <div class="main_page_r">
              <el-pagination
                :current-page="upload_current_sh.page"
                :page-sizes="[10, 30, 50, 100]"
                :page-size="upload_limit_sh"
                layout="total, sizes, prev, pager, next, jumper"
                :total="upload_totalCount_sh"
                @size-change="upload_changeLimit"
                @current-change="upload_changePage"
              />
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import store from "@/store";
import {
  isLoginSet_index,
  isLoginSet_save,
  groupGoods_goods,
  goodsSelect_checkImage,
  getShopUrl,
  getClassStyle,
  updataClassStyle,
} from "@/api/shop/shop";
import { category_index } from "@/api/commodity/commodityClassification";
import { puzzleImg, uploadPath } from "@/api/currency";
import { apiUrl, objKeySort, Md5, packApi } from "@/utils/public";
import { recursion, category } from "@/utils/index";
import infomation from "./components/infomation";
import banner from "./components/banner";
import goods from "./components/goods";
import parts from "./components/parts";
import subject from "./components/subject";

export default {
  components: {
    infomation,
    banner,
    goods,
    parts,
    subject,
  },
  data() {
    return {
      bannerimg: require("@/assets/shop/banner1.jpg"),
      listLoading: false,
      switchValue: {
        is_login_index: 0,
        is_login_category: 0,
        is_login_cart: 0,
        is_login_my: 0,
      },
      styleNums: 1,

      // 控制右侧模块
      banner: { show: false },
      infomation: { show: false },
      parts: { show: false, style: 1 },
      subject: { show: true, style: 1 },
      goods: { show: false, style: 1 },
      tabbar: { show: false },

      isRadio: true, //选择商品弹窗 是否是单选
      //临时存储 选择的商品数据
      // temporaryGoodsInfo:{},
      temporaryGoodsInfo: [],
      //确定后保存
      goodsInfo: [],

      current: {
        id: "",
        index: [],
      },

      // 分类
      options: [],
      shield: false, //控制选择商品弹窗
      list_sh: {
        list: {
          data: [],
        },
      },
      form_sh: {
        pid: "",
        category_id: [],
        name: "",
      },
      current_sh: {
        page: 1,
        per_page: 50,
      },
      limit_sh: 50,
      totalCount_sh: 1,
      selectArr_sh: [],
      defaultProps: {
        children: "selfNext",
        label: "title",
        value: "id",
        checkStrictly: true,
      },

      uploadHeader: {
        Authorization: store.getters.token,
      },
      puzzleImg,
      upload_img: uploadPath,

      /*  上传方式 */
      upload_type_show: false,
      online_images_show: false,
      activeName: "",
      upload_current_sh: {
        page: 1,
        per_page: 50,
      },
      upload_limit_sh: 50,
      upload_totalCount_sh: 1,
      upload_data: {
        category: [],
        list: [],
      },
      upload_form: {
        pid: 1,
        category_id: "",
      },
      upload_current: {
        ref: "refBanner",
      },
      shop_url: "",
      more_address_url: [
        {
          title: "超管助手",
          url: "",
          name: "administor_url",
        },
        {
          title: "采购助手",
          url: "",
          name: "buyer_url",
        },
        {
          title: "司机助手",
          url: "",
          name: "driver_url",
        },

        {
          title: "业务员助手",
          url: "",
          name: "salesman_url",
        },

        {
          title: "供应商助手",
          url: "",
          name: "supplier_url",
        },
        {
          title: "药残检测",
          url: "",
          name: "drug_url",
        },
        {
          title: "触摸屏分拣",
          url: "",
          name: "sort_url",
        },
        {
          title: "供应商分拣",
          url: "",
          name: "gysfj_url",
        },
        {
          title: "收购本地菜",
          url: "",
          name: "local_url",
        },
        {
          title: "库房助手",
          url: "",
          name: "zskf_url",
        },
        {
          title: "pc商城",
          url: "",
          name: "cmall_url",
        },
      ],
      allocationList: [
        {
          name: "首页配置",
          id: 1,
        },
        {
          name: "分类配置",
          id: 2,
        },
      ],
      // 默认选择的页面配置
      allocationActive: 1,
      categoryList: [],
    };
  },
  computed: {
    ...mapGetters(["avatar", "mallSettingStyle"]),
  },
  created() {
    this.getCategory();
    this.getSwitch();
    //获取选择商品列表的数据
    this.groupGoods_goods();
    this.getShopUrl();
    // 获取分类样式
    this.getClassStyle();
  },
  methods: {
    // 获取分类列表
    getCategory() {
      category_index(packApi()).then((res) => {
        if (res.errcode == 0) {
          this.categoryList = recursion(res.data.category);
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    getClassStyle() {
      let data = packApi();
      getClassStyle(data).then((res) => {
        if (res.errcode == 0) {
          this.styleNums = res.data.cat_menu_type;
        }
      });
    },
    changeAllocation(item) {
      this.allocationActive = item.id;
    },
    chooseStyle1(style) {
      this.styleNums = style;
    },
    submitShow() {
      let data = {
        cat_menu_type: this.styleNums,
      };
      let data1 = packApi(data);
      updataClassStyle(data1).then((res) => {
        if (res.errcode == 0) {
          this.$message.success("修改成功");
        }
      });
    },
    getSwitch() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name
      );
      isLoginSet_index(data).then((res) => {
        if (res.errcode == 0) {
          this.switchValue = {
            is_login_index: res.data.list.is_login_index,
            is_login_category: res.data.list.is_login_category,
            is_login_cart: res.data.list.is_login_cart,
            is_login_my: res.data.list.is_login_my,
          };
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    submitSwitch() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, this.switchValue)) +
              apiUrl().appsecret
          ),
        },
        this.switchValue,
        apiUrl().name
      );
      return
      isLoginSet_save(data).then((res) => {
        if (res.errcode == 0) {
          this.$message.success("保存成功");
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    //显示右侧弹窗
    showModle(type) {
      this.banner.show = false;
      this.infomation.show = false;
      this.parts.show = false;
      this.subject.show = false;
      this.goods.show = false;
      this.tabbar.show = false;
      this.$nextTick(() => {
        this[type].show = true;
      });
    },
    //选择样式
    chooseStyle(name, type) {
      this[name].style = type;
    },
    //强制登录
    changeSwitch(e, type) {
      this.switchValue[type] = e;
    },
    //打开弹窗
    selectGoods(options) {
      this.temporaryGoodsInfo = {};
      this.current = {
        index: options.index,
        id: options.id,
        ref: options.ref,
      };
      this.isRadio = options.isRadio;
      this.shield = true;
    },
    //弹窗选择商品（单选）
    chooseGoods(data) {
      this.temporaryGoodsInfo = data;
    },
    // // 弹窗选择商品（多选）
    // handleSelectionChange(val) {
    //     this.selectArr_sh = [];
    //     val.map((item) => {
    //       this.selectArr_sh.push({ id: item.id });
    //     });
    // },
    // 确定选择商品
    submitGoods() {
      let index = this.current.index,
        ref = this.current.ref;
      this.$refs[ref].getSelectedGood(index, this.temporaryGoodsInfo);

      this.close();
    },
    groupGoods_goods() {
      this.listLoading = true;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(
              Object.assign(
                apiUrl().name,
                this.list_form(),
                { group_id: this.id },
                this.current_sh
              )
            ) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { group_id: this.id },
        this.list_form(),
        this.current_sh
      );
      groupGoods_goods(data).then((res) => {
        this.listLoading = false;
        if (res.errcode == 0) {
          this.options = recursion(res.data.categoryList, true);
          res.data.list.data.map((e) => {
            if (e.images.length != 0) {
              e.images.map((a) => {
                a.path = this.avatar.domain + a.path;
                if (a.main == 1) {
                  e.pic = a.path;
                }
              });
              e.pics = e.images.map((s) => s.path);
            } else {
              e.pic = "";
              e.pics = [];
            }
          });
          this.list_sh = res.data;
          this.totalCount_sh = res.data.list.total;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    list_form() {
      let form_sh = JSON.parse(JSON.stringify(this.form_sh));
      form_sh.pid = form_sh.category_id[0] ? form_sh.category_id[0] : "";
      form_sh.category_id = category(form_sh.category_id);
      return form_sh;
    },
    // 搜索
    getArticleList() {
      this.current_sh.page = 1;
      this.groupGoods_goods();
    },
    diareset() {
      this.$refs["userListFrom1"].resetFields();
      this.getArticleList();
    },
    // 关闭清空表单
    close() {
      this.$refs["userListFrom1"].clearValidate();
      this.current = { id: "", index: [] };
      this.temporaryGoodsInfo = {};
      this.shield = false;
      this.$nextTick(() => {
        if (!this.isRadio) {
          this.$refs.multipleTable1.clearSelection();
        }
      });
    },
    // 分页
    changeLimit(pageSize) {
      this.current_sh.per_page = pageSize;
      this.groupGoods_goods();
    },
    changePage(page) {
      this.current_sh.page = page;
      this.groupGoods_goods();
    },

    /* ----在线图库---- */
    // 图片上传
    uploadSuccess(res) {
      let ref = this.upload_current.ref;
      this.$refs[ref].getUploadImg(res);
    },
    uploadErr() {
      this.$message.error("上传失败，请重试");
    },
    // 选择在线图库
    upload_online() {
      this.$nextTick(() => {
        this.goodsSelect_checkImage();
        this.online_images_show = true;
      });
    },
    online_images_close() {
      this.upload_type_show = false;
      this.$nextTick(() => {
        this.online_images_show = false;
        this.activeName = "";
        this.upload_form.pid = "";
        this.upload_form.category_id = "";
        this.upload_data.category = [];
        this.upload_data.list = [];
      });
    },
    upload_changeLimit(pageSize) {
      this.upload_current_sh.per_page = pageSize;
      this.goodsSelect_checkImage();
    },
    upload_changePage(page) {
      this.upload_current_sh.page = page;
      this.goodsSelect_checkImage();
    },
    // 选择上传图片方式
    changeUploadType(options) {
      this.upload_form.pid = options.pid;
      this.upload_current.ref = options.ref;
      this.upload_type_show = true;
    },
    // 加载列表
    goodsSelect_checkImage() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(
              Object.assign(
                apiUrl().name,
                this.list_form(),
                { group_id: this.id },
                this.current_sh
              )
            ) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        this.upload_current_sh,
        this.upload_form
      );
      goodsSelect_checkImage(data).then((res) => {
        if (res.errcode == 0) {
          if (this.upload_data.category.length == 0) {
            this.upload_data.category = res.data.category;
          }
          res.data.list.data.map((e) => {
            e.show = false;
            e.path = this.avatar.domain + e.img;
          });
          this.upload_data.list = res.data.list.data;
          this.upload_totalCount_sh = res.data.list.total;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 切换导航栏
    handleClicktab(tab, event) {
      this.upload_form.category_id = this.activeName;
      this.goodsSelect_checkImage();
    },
    // 点击使用图片
    handleUpload(item) {
      this.$confirm("确定使用该图片吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let res = {
            code: 0,
            data: {
              path: item.img,
              src: item.path,
            },
          };
          let ref = this.upload_current.ref;
          this.$refs[ref].getUploadImg(res);
          this.online_images_close();
        })
        .catch(() => {});
    },
    // 获取商城地址
    getShopUrl() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, this.switchValue)) +
              apiUrl().appsecret
          ),
        },
        apiUrl().name
      );
      getShopUrl(data).then((res) => {
        this.shop_url = res.shop_url;
        let response = res;
        this.more_address_url.map((e) => {
          e.url = response[e.name];
        });
      });
    },
    // 一键复制
    handleCopy() {
      if (!this.shop_url) {
        return;
      }
      this.copyToClipboard(this.shop_url); // 需要复制的文本内容
      this.$message.success("商城入口地址复制成功！");
    },
    // 更多入口复制
    handleCopyMore(item) {
      if (!item.url) {
        return;
      }
      this.copyToClipboard(item.url); // 需要复制的文本内容
      this.$message.success(`${item.title}地址复制成功！`);
    },

    // 点击复制到剪贴板函数
    copyToClipboard(content) {
      if (window.clipboardData) {
        window.clipboardData.setData("text", content);
      } else {
        (function (content) {
          document.oncopy = function (e) {
            e.clipboardData.setData("text", content);
            e.preventDefault();
            document.oncopy = null;
          };
        })(content);
        document.execCommand("Copy");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-btw {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex-middle {
  display: flex;
  align-items: center;
}
.flex-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
/deep/.el-upload-list {
  display: none;
}
.maincs {
  font-size: 12px;
  .main_white {
    overflow: hidden;
    .address_container {
      display: flex;
      align-items: center;
    }
    .address_box {
      display: flex;
      align-items: center;
      padding: 10px 0;
      font-size: 14px;
      a {
        padding: 0 10px;
        color: #19b098;
        text-decoration: underline;
        min-width: 160px;
      }
      i {
        font-size: 16px;
        &:hover {
          color: #19b098;
        }
      }
    }
    .more_address {
      display: flex;
      align-items: center;
      cursor: pointer;
    }

    .left_box {
      width: 375px;
      display: flex;
      flex-direction: column;
      float: left;

      // .submit{
      //   width:100px;
      //   padding:5px 15px;
      //   border-radius: 4px;
      //   background:#19b098;
      //   color:#fff;
      //   margin-top: 20px;
      // }
    }
    .left {
      width: 375px;
      min-height: 667px;
      border: 2px solid #eee;
      background: #f6f6f7;
      background-image: url(../../assets/images/shop_bg.png);
      background-size: 375px 667px;
      background-repeat: no-repeat;
      .left_modle {
        border: 1px solid transparent;
        &.on {
          border: 1px dashed #f71414;
        }
      }
      .search {
        height: 30px;
        border-radius: 15px;
        color: #b7b8ba;
        background: #f0f1f3;
        font-size: 12px;
        padding: 0 20px;
        box-sizing: border-box;
        margin: 17px;
        visibility: hidden;
      }
      .banner_box {
        margin: 0 17px;
        margin-top: 15px;
      }
      .info {
        margin: 0 17px;
      }
      .part {
        // width: 100%;
        margin: 0 16px;
      }
      .title {
        font-size: 16px;
        font-weight: 600;
        color: #191919;
        margin: 0 17px 20px;
      }
      .subject {
        margin: 10px 17px 0;
      }
    }
    .right {
      float: left;
      margin-left: 20px;
      /deep/.modle {
        color: #797979;
        border: 1px solid #e7e7e7;
        background: #f5f7fa;
        padding: 10px 27px;
        .submit {
          all: unset;
          width: 150px;
          padding: 10px 15px;
          border-radius: 4px;
          background: #19b098;
          color: #fff;
          margin-top: 20px;
          box-sizing: border-box;
          text-align: center;
          cursor: pointer;
        }
        .tit {
          color: #19b098;
          margin-bottom: 14px;
          &::before {
            content: "-";
            color: transparent;
            background: #19b098;
            width: 4px;
            height: 13px;
          }
          b {
            color: #000;
            font-size: 14px;
            margin-left: 6px;
            margin-right: 19px;
          }
        }
      }
      .tabbar {
        .setting {
          span {
            display: inline-block;
            width: 60%;
            margin-top: 10px;
          }
        }
      }
    }
  }
}

// 改动
.part_model {
  margin-top: 10px !important;
  position: relative;
  .part-icon {
    position: absolute;
    bottom: 5px;
    left: 50%;
    width: 18px;
    height: 6px;
    transform: translateX(-58%);
  }
}
.special {
  background-color: #fff;
  margin: 10px 16px 0 16px;
  .special_title {
    font-size: 16px;
    font-weight: 600;
    color: #191919;
    padding: 15px 14px 7px;
  }
  img{
    width: 335px;
    height: 160px;
    margin: 0 auto 7px;
  }
}
.commodity {
  // background-color: #fff;
  margin: 10px 16px 0 16px;
}

.upload_type_container {
  display: flex;
  align-items: center;
  justify-content: space-around;
  & > div {
    width: 90px;
    height: 90px;
    text-align: center;
    line-height: 90px;
    font-size: 14px;
    color: #ccc;
    border: 1px dashed #e6e6e6;
    cursor: pointer;
  }
}
.online_images_dialog {
  /deep/ .el-dialog__body {
    padding: 0 20px 10px;
  }
  /deep/.el-tabs__item:focus.is-active.is-focus:not(:active) {
    box-shadow: none !important;
  }
  /deep/ .el-tabs__item.is-active {
    color: #19b098;
  }
  /deep/ .el-tabs__active-bar {
    background-color: #19b098;
  }
  /deep/.el-tabs__item {
    &:hover {
      color: #19b098;
    }
  }
  /deep/.el-icon-arrow-left,
  /deep/.el-icon-arrow-right {
    font-size: 16px;
  }
}
.online_images_container {
  .header {
    min-height: 40px;
  }
  //中间部分
  .container {
    width: 100%;
    height: 400px;
    overflow: auto;
    .no_image {
      width: 100%;
      padding-top: 40px;
      text-align: center;
    }
    .image_box {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      flex-wrap: wrap;
      .item {
        margin-right: 15px;
        margin-bottom: 15px;
        position: relative;
        max-width: 230px;
        min-width: 60px;
        border-radius: 8px;
        overflow: hidden;
        .el-image {
          width: 100%;
        }
        .image {
          font-size: 0;
        }
        .image_mask_main {
          cursor: pointer;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba($color: #000000, $alpha: 0.5);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #ffffff;
          span {
            cursor: pointer;
          }
        }
      }
    }
  }
  .footer_page {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .main_page {
      margin-top: 10px;
      margin-left: 0px;
      margin-bottom: 0px;
    }
  }
}
.dropdown_item {
  display: flex;
  align-items: center;
  flex-direction: row;
  a {
    padding: 0 10px;
    color: #19b098;
    text-decoration: underline;
    min-width: 150px;
  }
  i {
    font-size: 16px;
    &:hover {
      color: #19b098;
    }
  }
}

.css_box {
  width: 248px;
  height: 158px;
  border: 1px solid #d1d1d1;
  background: #fff;
  justify-content: center;
  &.on {
    border-color: #19b098;
  }
  + .css_box {
    margin-left: 20px;
  }
  .css {
    width: 100%;
    height: 110px;
    padding: 0 10px;
    .block {
      background: #a9eee3;
      width: 40px;
      height: 40px;
    }
  }
  .css1 {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .css2 {
    padding: 0 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-around;
  }
}
</style>
